<!DOCTYPE html>
<html data-use-rem>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/cglist.css"/>
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/product.css"/>
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/add.css"/>
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/product_cate.css"/>

    <script type="text/javascript" src="/plan/caigou/js/jquery.1.9.1.js" ></script>
    <script type="text/javascript" src="/plan/caigou/js/layer.js" ></script>
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/layer.css"/>
    <script type="text/javascript" src="/plan/caigou/js/iScroll.js" ></script>
    <script type="text/javascript" src="/plan/caigou/js/Mdate.js" ></script>
    <link rel="stylesheet" href="/plan/caigou/css/Mdate.css" />
    <script type="text/javascript" src="/plan/caigou/js/rem.js" ></script>
    <script src="/plan/js/dropload.min.js"></script>
    <title>拆分</title>
</head>
<style>
    body{font-size:16px;position: relative}
    *{
        -webkit-overflow-scrolling: touch;
    }
    section{  margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }
    .session2{display: inline-block;margin-top: 0.1rem;font-size: 0.3rem;}
    #add1 ul,li,span,input,div{box-sizing: border-box}
    .caigou{font-size: 0.3rem;}
    .bitian0{margin-right: 0.2rem;}
    .bitian,.bitian2,.bitian3,.bitian0{float: right;color: #999;margin-top: 0.13rem;}

    input{-webkit-appearance: none;}
    body .layui-m-layer .layui-m-layer-msg{bottom: 0;}


    .z_button{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;

    }
    .z_button div{width: 50%;float: left;
        background-color: #ffffff;
        height: 0.98rem;
        color: #4876b2;
        text-align: center;
        line-height: 0.98rem;

    }
    #zbtn2{
        background-color: #4876b2;
        color: #ffffff;
    }
    .dropload-noData,.dropload-load,.dropload-refresh{
        position: relative;
        margin-top: 0.31rem;
        font-size: 0.22rem;
        width: 1.6rem;
        margin: 0 auto;
        color: grey;
        text-align: center;
    }
    .dropload-noData:after,.dropload-load:after,.dropload-refresh:after {
        content: "";
        position: absolute;
        top: 0.16rem;
        width: 1.01rem;
        height: 1px;
        background-color: #eeeeee;
        right: -1.18rem;
    }

    .dropload-noData:before,.dropload-load:before,.dropload-refresh:before {
        content: "";
        position: absolute;
        top: 0.16rem;
        width: 1.01rem;
        height: 1px;
        background-color: #eeeeee;
        left: -1.2rem;
    }
    .dropload-down{
        display: none;
    }

    .productinfo{margin: 0 0 0.2rem 0;}
    .infop2{font-size: 0.28rem;margin: 0.1rem 0;}
    .session{font-size: 0.3rem;margin-top: 0.1rem;display: inline-block;}
    #add2{display: block}
    #add3{display: none}
    #add4{display: none}
    #add5{display: none}

</style>
<body>

<section id="add2" style="position:relative">
    <div class="top">
        <div class="top_left" style="width: 100%;border: none">
            <span class="top_left_con1">产品分类</span>
            <img class="top_left_xia1" src="/plan/caigou/img/jtxia.png" />
            <img class="top_left_up1" src="/plan/caigou/img/jtup.png" />
        </div>

    </div>

    <ul class="productinfo" id="pro2" style="margin-top: 1rem">


    </ul>

</section>
<section id="add5" style="display: none">
    <div id="mescroll" class="mescroll" style="top:0.03rem" >
        <ul class="cglist" id="cglist" style="margin-bottom: 1rem; ">
        </ul>
    </div>

</section>
<section id="add6" style="display: none">
    <div class="container">
        <div class="goods">
            <div class="left_tab_container">
                <ul class="category">
                    {volist name="preCate" id="vo"}
                    <li {if condition="$i eq 1"}class="cateshow"{/if} dataid="{$vo.id}">{$vo.name}</li>
                    {/volist}
                </ul>
            </div>
            <ul class="cate_content">
                <li id="cate_ajax">

                    {volist name="cate" id="vo"}
                    <div class="cate_content_title">
                        <span class="h"></span><span>{$vo.name}</span><span class="h"></span>
                    </div>
                    <table cellspacing="0" cellpadding="0">
                        <tr>
                            {volist name="vo['cateArr']" id="v"}
                            <td onclick="tdClick(this)" dataid="{$v.id}">{$v.name}</td>
                            {/volist}
                        </tr>
                    </table>
                    {/volist}



                </li>

            </ul>
        </div>

    </div>
</section>

<script>//提交表单
var jsonData={};
var meLoad;
var scrollTemp=0;//滚动到指定位置
jsonData.counter=1;
$(function(){
    //测试部分
    /*第一步初始化*/
    //clearCache()
    initList();
    $(".category li").click(function () {
        let _this = $(this);
        let did = _this.attr('dataid');

        if (did==jsonData.cate1)return false;
        let preCate = jsonData.cate1;
        jsonData.cate1=did;
        layer.open({type: 2,  shadeClose: false});

        $.ajax({
            type:"post",
            data:jsonData,
            url:"/index/store/getCate",
            success:function (data) {

                layer.closeAll();
                if (data.code==0){
                    jsonData.cate1=preCate;
                    layer.open({
                        content:'此分类下暂无分类' ,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    return false;
                }else{
                    $(".category li").removeClass('cateshow');
                    _this.addClass('cateshow');
                    $("#cate_ajax").html(data.html);
                }
            }
        });

    });



    //搜索部分
    $("#list_search_submit").click(function () {
        let seVal = $("#keyword").val();
        if (seVal==''){
            layer.open({
                content:'关键词不能为空' ,
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }
        //清空Pid属性
        if (jsonData.hasOwnProperty("pid"))delete jsonData.pid;
        jsonData.counter=1;
        jsonData.title=seVal;
        //分类搜索重置
        $(prev).css("color",'#333');
        $(".company").children(":first").css('color','#457bc7');
        prev=$(".company").children(":first");
        overProduct();


    });
    $('.top_left').click(function(){

        //$("#pro2").html('');

        $("#add6").toggle();

        $("#pro2").toggle();
        $("#add2 .footer").toggle();
        $("#add2 .queding").toggle();

        $('.top_left_con1').css('color','#000');

    });
    $('.sou').click(function(){
        $('.cate_mid').show();
        $('.company').hide();
        $('.top_left_up1').hide();
        $('.top_left_xia1').show();
        $('.top_left_con1').css('color','#555');
    });

});
function tdClick(obj) {
    let did = $(obj).attr('dataid');
    if (jsonData.hasOwnProperty("pid") && jsonData.pid==did){
        $("#add6").hide();
        $("#pro2").show();
        return false;
    }
    jsonData.counter=1;
    $("#cate_ajax td").css("color",'#808080');
    jsonData.pid=did;
    $(obj).css("color",'#ffa400');
    $("#pro2").html('');
    $("#add6").hide();
    $("#pro2").show();
    overProduct();

}
function getList(data) {
    let str='';
    data.forEach(function (e,i) {
        str+='<li>\n' +
            '\t\t\t\t<div class="infoleft"><img src="/plan/caigou/img/product.png"></div>\n' +
            '\t\t\t\t<div class="inforight">\n' +
            '\t\t\t\t\t<p>'+e.cname+'</p>\n' +
            '\t\t\t\t\t<div class="infop3" style="margin-top: 20px">\n' +
            '\t\t\t\t\t\t库存:<span id="cp'+e.id+'">'+e.storenum+'</span>\n' +
            '\t\t\t\t\t\t<!--<input class="info3_right" type="button" value="+" />-->\n' +
            '\t\t\t\t\t\t<div class="box">\n' +
            '\t\t\t\t\t\t\t<div>\n' +
            '\t\t\t\t\t\t\t</div>\n' +
            '\t\t\t\t\t\t\t<div><input class="num znum" style="width: 40px;border:1px solid #ff0101;margin-right: 4px" id="zt'+e.id+'"  style="" storenum="'+e.storenum+'" value="'+e.storenum+'" onkeyup="this.value.replace(/D/g,\'\')" type="number" name="number">\t\t\t\t\t\t\t</div>\n' +
            '\t\t\t\t\t\t\t<div>\n' +
            '\t\t\t\t\t\t\t\t<span  onclick="chaifen('+e.id+')" style="padding: 3px 5px;background: #169bd5;color: #ffffff">拆分</span>\n' +
            '\t\t\t\t\t\t\t</div>\n' +
            '\t\t\t\t\t  </div>\n' +
            '\t\t\t\t\t</div>\n' +
            '\t\t\t\t</div>\n' +
            '\t\t\t</li>';
    })
    return str;
}

//重载产品数据
function overProduct() {

    $.ajax({
        type:"post",
        url:"/index/store/getFin",
        data:jsonData,
        success:function (data) {
            if (data.list!=null){
                jsonData.counter++;
                let str=getList(data.list);
                $("#pro2").html(str);
                $("#pro2").show();
                if (data.list.length!=6){
                    meLoad.lock();
                    // 无数据
                    meLoad.noData();
                }else{
                    meLoad.unlock();
                    meLoad.noData(false);
                    meLoad.resetload();
                }





            }

        }

    })
}
function chaifen(obj) {
    let inp = $("#zt"+obj).val();
    let storenum=$("#zt"+obj).attr("storenum");
    if(inp<1 || inp > storenum || storenum < 1){
        layer.open({
            content:'请检查数量' ,
            skin: 'msg',
            time: 2 //2秒后自动关闭
        });
        return false;
    }
    let confirm = window.confirm("确定拆分吗?");
    if (confirm){
        layer.open({type: 2,  shadeClose: false,content:"拆分中..."});

        $.ajax({
            type:"post",
            url:"/index/store/chaifens",
            data:{id:obj,num:inp},
            success:function (data) {
                layer.closeAll();

                if (data.code==1){
                    layer.open({
                        content:'拆分成功' ,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                    let sy=parseInt(parseInt(storenum)-inp);
                    $("#zt"+obj).val(sy);
                    $("#zt"+obj).attr("storenum",sy);
                    $("#cp"+obj).html(sy);
                } else{
                    layer.open({
                        content:'+data.msg+' ,
                        skin: 'msg',
                        time: 2 //2秒后自动关闭
                    });
                  location.reload();
                }

            }

        })
    }
    return false;
}
function initList() {

    $('.dropload-down').remove();
    // 每页展示4个
    var num = 6;
    var pageStart = 1,pageEnd = 0;
    // dropload
    meLoad =  $('#pro2').dropload({
        scrollArea : window,
        loadDownFn : function(me){

            $.ajax({
                type:"post",
                url:"/index/store/getFin",
                data:jsonData,
                success:function (data) {

                    jsonData.counter++;
                    pageEnd = num * jsonData.counter;
                    pageStart = pageEnd - num;
                    if (data.list!=null){
                        if (data.list.length!=6){
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        let str=getList(data.list);
                        $("#pro2").append(str);
                        me.resetload();
                    }else{
                        me.lock();
                        // 无数据
                        me.noData();
                    }

                },
                error: function(xhr, type) {
                    me.lock();
                    // 无数据
                    me.noData();
                    me.resetload();
                }
            })

        }
    });


}
</script>
</body>
</html>
